<template>
    <view class="wrap">
        <view class="usermessage">
            <view class="plate">
                <view class="title">姓名</view>
                <input type="text" placeholder="请输入姓名" v-model="name">
            </view>
            <view class="plate">
                <view class="title">手机</view>
                <input type="text" placeholder="请输入联系方式" v-model="tel">
            </view>
            <view class="plate">
                <view class="title">地址</view>
                <!-- <input type="text" readonly="readonly" placeholder="请输入所属区域"> -->
                <view class="address" @click="visible = true">{{ addr_text }}</view>
            </view>
            <cityPicker :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"
                :visible="visible" />
            <textarea class="detailed_address" placeholder="请输入详细地址" placeholder-style="color:#999;"
                v-model="detail"></textarea>
        </view>
        <view class="switch">
            <view class="switch_wrap">
                <view class="title">设为默认地址</view>
                <u-switch v-model="value" @change="change"></u-switch>
            </view>
        </view>
        <view class="confirm1" @click="confirm1">确定</view>
    </view>
</template>

<script>
import cityPicker from '../../components/piaoyi-cityPicker/pioayi-cityPicker.vue'
import { get_order_saveAddress } from '../../api/order'
export default {
    components: {
        cityPicker
    },
    onLoad(options) {
        this.addr_id = options.addr_id
    },
    data() {
        return {
            visible: false,
            maskCloseAble: true,
            defaultValue: '',
            addr_text: '请输入所属地址',
            value: false,
            name: '',
            tel: '',
            detail: '',
            addr_code: '',
            is_default: '',
            uid: uni.getStorageSync('uid'),
            token: uni.getStorageSync('token'),
            addr_id: '',

        }
    },
    methods: {
        //地址选择器确认
        confirm(val) {
            console.log(val)
            this.addr_text = val.name
            this.addr_code = val.code
            this.visible = false
        },
        cancel() {
            this.visible = false
        },
        //默认地址开关
        change(e) {
            console.log(e)
            this.is_default = e
        },
        //确认
        confirm1() {
            let { name, tel, addr_text, detail } = this
            if (name == '') {
                console.log('请填写用户名')
                return
            }
            if (!/^1[3-9]\d{9}$/.test(tel)) {
                // this.$toast('手机号码格式错误');
                console.log("手机号码格式错误")
                return;
            }
            if (addr_text == '' && addr_text == '请输入所属地址') {
                console.log('请选择所属区域')
                return;

            }
            if (detail == '') {
                console.log('请填写详细地址')
                return;

            }
            //添加收货地址

            get_order_saveAddress({
                name: this.name,
                tel: this.tel,
                addr_text: this.addr_text,
                detail: this.detail,
                is_default: this.is_default,
                uid: this.uid,
                addr_id: this.addr_id
            }, { token: uni.getStorageSync('token') }).then(res => {
                console.log(res)
                let seapc = 1
                if (res.code == 1) {

                    setTimeout(() => {
                        uni.navigateTo({ url: '/pages/address/address?seapc=' + seapc })
                    }, 100)
                }
            })


        }
    }

}
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;

    .usermessage {
        background-color: #fff;

        .plate {
            width: 95%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;

            .address {
                font-size: 18px;
                color: #808080;
                width: 45%;
            }
        }

        .detailed_address {
            width: 100%;
            height: 50px;
            padding: 0 10px;
        }

    }

    .switch {
        width: 100%;
        height: 40px;
        background-color: #fff;

        .switch_wrap {
            width: 90%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

    }

    .confirm1 {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        font-size: 18px;
        text-align: center;
        line-height: 50px;
        background-color: #fdd100;
        color: #fff;
        z-index: 1000;
    }
}
</style>